<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              v-model="isCheck"
              @change="allcheck"
            />全选/全不选
          </th>
          <th v-for="(item, index) in title" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in arr" :key="index">
          <td><input type="checkbox" v-model="item.isChecked" /></td>
          <td>{{ item.bookName }}</td>
          <td>{{ item.createDate }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num--">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
        </tr>
        <tr>
          <td colspan="5">总价为：{{ sum }}元</td>
        </tr>
      </tbody>
    </table>
    <p >{{ num }}</p>
    <button @click="num++">1111</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      title: ["书籍名称", "出版日期", "价格", "数量"],
      arr: [
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 85,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 59,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 35,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 129,
          num: 1,
          isChecked: false,
        },
      ],
    };
  },
  methods: {
    allcheck() {
      console.log(this.isCheck);
      if (this.isCheck == false) {
        this.arr.forEach((item, index) => {
          this.arr[index].isChecked = true;
        });
      } else {
        this.arr.forEach((item, index) => {
          this.arr[index].isChecked = false;
        });
      }
    },
  },
  computed: {
    isCheck: {
      get() {
        return this.arr.every((item, index) => {
          return this.arr[index].isChecked == true;
        });
      },
      set() {},
    },
    sum() {
      return this.arr.reduce((pre, cul) => {
        return cul.isChecked ? pre + cul.price * cul.num : pre;
      }, 0);
    },
  },
};
</script>
<style lang = "less" scoped>
table {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #000;
  border-collapse: collapse;
  text-align: center;
}

table th,
td {
  border: 1px solid #000;
  text-align: center;
}
</style>